<template>
  <el-icon>
    <expand
      class="icon"
      :class="collapseIcon"
      @click="handleCollapse"
    />
  </el-icon>
</template>

<script setup>
import { Expand } from '@element-plus/icons-vue'
import useSystemStore from '@/store/system'

const systemStore = useSystemStore()
// console.log(store.state.system)
const collapseIcon = computed(() => {
  return systemStore.isCollapse ? '' : 'is-active'
})

const handleCollapse = () => {
  systemStore.setIsCollapse(!systemStore.isCollapse)
}
</script>

<style lang="scss" scoped>
.icon{
  transition: transform 0.28s;
}
.is-active {
  transform: rotate(180deg);
}
</style>
